<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>事件处理</title>
        <style>
            .wrapper { margin: 15px ; border: 1px solid blue ; }
        </style>
    </head>
    <body>

        <h3>使用原生JavaScript处理事件</h3>

        <div class="wrapper first">
            <button type="button" onclick="first(this)">第一个按钮</button>
            直接在HTML元素上使用 onEventType="handler()" 形式来处理事件
            <script>
                function first( btn ){
                    console.log( btn );
                }
            </script>
        </div>

        <div class="wrapper second">
            <button type="button">第二个按钮</button>
            通过 JavaScript 选择 HTML元素 后再指定事件处理函数
            <script>
                let btn = document.querySelector( '.second>button' );
                // 通过 HTML元素 设置指定事件的处理函数
                btn.onclick = function( event ){
                    console.log( event );
                    let t = event.target ;
                    console.log( t );
                    console.log( t === btn );
                }
            </script>
        </div>

        <div class="wrapper third">
            <button type="button">第三个按钮</button>
            通过 addEventListener 函数为 HTML元素 绑定事件监听器
            <script>
                let thirdButton = document.querySelector( '.third>button' );
                // 明确事件类型
                let type = 'click' ;
                // 明确如何控制事件
                let listener = {
                    handleEvent: function( event ){
                        console.log( event );
                        let t = event.target ;
                        console.log( t );
                        console.log( thirdButton === t );
                    }
                }
                // 明确在哪个阶段处理事件
                let capture = false ;
                // 为指定的 HTML 元素绑定事件监听器
                thirdButton.addEventListener( type , listener , capture );
            </script>
        </div>
        
    </body>
</html>